<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的信息</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">

    <style>

    </style>
</head>
<body class="frame-body">
<div id="wrapper" v-cloak>
    <el-container>
        <el-header style="background: #292828">
            <el-row style="height: 100%;" type="flex" justify="center" align="middle">
                <el-col :span="5">
                    <div style="color: white; text-align: center; font-size: 24px;">
                        深巷博客平台
                    </div>
                </el-col>
                <el-col :span="16">
                    <el-menu
                            :default-active="src"
                            mode="horizontal"
                            @select="handleSelect"
                            class="el-menu-demo"
                            background-color="#292828"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                    >
                        <el-menu-item index="index.html">博客首页</el-menu-item>
                        <el-menu-item index="blog.html">技术博文</el-menu-item>
                        <el-menu-item index="resource.html">资源站点</el-menu-item>
                        <el-menu-item index="message.html">留言反馈</el-menu-item>
                        <el-menu-item index="author.html">关于作者</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="4">
                    <div v-if="user.id">
                        <span style="color: white">欢迎你：{{user.username}}&nbsp;&nbsp;</span>
                        <el-button size="mini" @click="logout">退出</el-button>
                    </div>
                    <div v-else>
                        <a href="/page/end/login.html">
                            <el-button size="mini" type="primary">登录</el-button>
                        </a>
                        <a href="/page/end/register.html">
                            <el-button size="mini">注册</el-button>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row type="flex" justify="center" :gutter="20">
                <el-col :span="16">
                    <el-card>
                        <div style="padding-bottom: 10px; font-size: 18px">我的足迹</div>
                        <div style="margin-top: 10px">
                            <a :href="item.url" target="_blank" v-for="item in station">
                                <el-tag style="margin: 5px" effect="dark" type="success">{{item.name}}</el-tag>
                            </a>
                        </div>

                        <div style="margin-top: 20px; font-size: 18px">资源导航</div>
                        <div style="margin-top: 10px">
                            <a :href="item.url" target="_blank" v-for="item in resource">
                                <el-tag style="margin: 5px" effect="dark" type="warning">{{item.name}}</el-tag>
                            </a>
                        </div>

                        <div style="margin-top: 20px; font-size: 18px">项目实战</div>
                        <div style="margin-top: 10px">
                            <a :href="item.url" target="_blank" v-for="item in program">
                                <el-tag style="margin: 5px" effect="dark" type="danger">{{item.name}}</el-tag>
                            </a>
                        </div>

                        <div style="margin-top: 20px; font-size: 18px">友情链接</div>
                        <div style="margin-top: 10px">
                            <a :href="item.url" target="_blank" v-for="item in link">
                                <el-tag style="margin: 5px" effect="dark" type="info">{{item.name}}</el-tag>
                            </a>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-card style="background-color: #4e4e4e; color: #e3e3e3">
                            <div style="border-bottom: 1px solid orangered; padding-bottom: 10px; font-size: 20px">博主简介</div>
                            <div style="color: #f0f8ff; margin: 10px 0; font-size: 14px">
                                <i class="el-icon-s-custom"></i>
                                <span>职业：Web全栈工程师</span>
                            </div>
                            <div style="color: #f0f8ff; margin: 10px 0; font-size: 14px">
                                <i class="el-icon-map-location"></i>
                                <span>地址：湖南省郴州市</span>
                            </div>
                            <div style="color: #f0f8ff; margin: 10px 0; font-size: 14px">
                                <i class="el-icon-medal"></i>
                                <span>QQ：1821959536</span>
                            </div>
                            <div style="color: #f0f8ff; margin: 10px 0; font-size: 14px">
                                <i class="el-icon-trophy"></i>
                                <span>B站：bili_897003148535</span>
                            </div>
                            <div style="color: #f0f8ff; margin: 10px 0; font-size: 14px">
                                <i class="el-icon-message"></i>
                                <span>e-mail：1821959536@qq.com</span>
                            </div>
                                <div style="margin-top: 20px;">
                                        <span>
                                            <a href="javascript:void(0)" @mouseleave="hideImg('wxImg')"  @mouseover="showImg('wxImg')">
                                                <img style="width:20%; border-radius: 50%" src="/images/wx.jpg" alt="">
                                            </a>
                                            <div id="wxImg" style="display:none;height:50px;back-ground:#f00;position:absolute; margin-left: -35px">
                                                <img style="width:50%; border-radius: 5px" src="/images/bg3.jpg" alt="">
                                            </div>
                                        </span>
                                    <span>
                                            <a href="javascript:void(0)" @mouseleave="hideImg('qqImg')"  @mouseover="showImg('qqImg')">
                                                <img style="width:20%; border-radius: 50%" src="/images/wx.jpg" alt="">
                                            </a>
                                            <div id="qqImg" style="display:none;height:50px;back-ground:#f00;position:absolute; margin-left: 35px">
                                                <img style="width:50%; border-radius: 5px" src="/images/bg4.jpg" alt="">
                                            </div>
                                        </span>

                                </div>

                            </div>

                        </el-card>
                    </div>
                    <div style="margin: 20px 0">
                        <el-card>
                            <div style="border-bottom: 1px solid gray; padding-bottom: 10px; font-size: 20px">标签分类</div>
                            <div style="margin-top: 10px">
                                <a :href="'http://localhost:8888/page/front/blog.html?tag=' + item.name" v-for="item in tags">
                                    <el-tag style="margin: 5px">{{item.name}}</el-tag>
                                </a>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </el-main>

        <el-footer style="text-align: center; height:100px; width:100%; bottom: 0; color:white; background: #2A3746">
            <p style="margin-top: 10px">
                慵懒 ©2021 个人博客平台
            </p>
            <p style="margin-top: 10px">
                <span>微信号：y-j-f-l</span>
            </p>
            <p style="margin-top: 10px">
                <span>B站：bili_897003148535</span>
            </p>

        </el-footer>
    </el-container>
</div>

<!--    js-->
<script src="../../js/jquery.min.js"></script>

<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>

<script>
    new Vue({
        el: "#wrapper",
        data: {
            src: 'resource.html',
            user: {},
            tags: [],
            station: [],
            resource: [],
            program: [],
            link: []
        },
        created() {
            $.ajax({url: '/api/user/session', method: "GET", async: false, success: (res) => {this.user = res.data || {}}})
            $.get("/api/tag").then(res => {
                this.tags = res.data;
            });
            this.loadData()
        },
        methods: {
            handleSelect(key) {
                location.href = key;
                // window.setInterval("reinitIframe()", 50);
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadData() {
                let _this = this;
                $.get("/api/link").then(res => {
                    let result = res.data;
                    result.forEach(item => {
                        if ('我的足迹' === item.type) {
                            _this.station.push(item);
                        }
                        if ('资源导航' === item.type) {
                            _this.resource.push(item);
                        }
                        if ('项目实战' === item.type) {
                            _this.program.push(item);
                        }
                        if ('友情链接' === item.type) {
                            _this.link.push(item);
                        }
                    })
                });
                $.get("/api/user/" + this.user.id).then(res => {
                    this.user = res.data
                })
            },
            showImg(id) {
                document.getElementById(id).style.display='block';
            },
            hideImg(id) {
                document.getElementById(id).style.display='none';
            }
        }
    })
</script>
</body>
</html>
